<%-- 
    Document   : search
    Created on : 2019-9-18, 10:02:00
    Author     : danny
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/top.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            body {
                font: 11px arial;
            }

            .suggest_link {
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }

            .suggest_link_over {
                background-color: #E8F2FE;
                padding: 2px 6px 2px 6px;
            }

            #suggest {
                position: abslute;
                background-color: #FFFFFF;
                text-align: left;
                border: 1px solid #000000;
                display: none;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script>
            $(function () {
                $('#txtSearch').keyup(function () {
//                    console.log($('#txtSearch').val());
                    $('#suggest').html("").hide();
                    $.ajax({
                        url: '${contextPath}/search',
                        data: {content: $('#txtSearch').val()},
                        cache: false,
                        success:  function (result) {
                            console.log(result.split('-'));
                            
                            $(result.split('-')).each(function (idx, el) {
                                $('#suggest').append("<div class='suggest_link'>"+el+"</div>").show();
                            });
                        }
                    });
                /*
                    $.post('${contextPath}/search', {content: $('#txtSearch').val()}, function (result) {
                        console.log(result.split('-'));
                        $(result.split('-')).each(function (idx, el) {
                            $('#suggest').append("<div class='suggest_link'>"+el+"</div>").show();
                        });
                    });*/
                });
            });
        </script>
    </head>
    <body>
        <h3>
            Ajax实现搜索提示
        </h3>
        <div style="width: 500px">
            <form action="" id="formSearch">
                <input type="text" id="txtSearch" name="txtSearch"
                       autocomplete="off" />
                <input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" />
                </br>
                <div id="suggest" style="width: 200px"></div>
            </form>
        </div>
    </body>
</html>
